<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  @if (error) {
    <nz-alert [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg" />
  }
  <nz-tabs [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)" [nzSelectedIndex]="type">
    <nz-tab [nzTitle]="'app.login.tab-login-credentials' | i18n">
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入用户名">
          <nz-input-group nzSize="large" nzPrefixIcon="user">
            <input nz-input formControlName="userName" placeholder="用户名" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入密码">
          <nz-input-group nzSize="large" nzPrefixIcon="lock">
            <input nz-input type="password" formControlName="password" placeholder="密码" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzErrorTip]="'validation.verification-code.required' | i18n">
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large" nzPrefixIcon="mail">
                <input nz-input formControlName="passwordCode" placeholder="验证码" />
              </nz-input-group>
            </nz-col>
            <nz-col [nzSpan]="8">
              <img
                nz-image
                [nzSrc]="passwordCaptcha.imageData"
                style="height: 40px; width: 100%"
                (click)="getPasswordCaptch()"
                [nzDisablePreview]="true"
                nz-popover
                nzPopoverTitle="验证码"
                nzPopoverContent="看不清？点击更换"
              />
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
    <nz-tab [nzTitle]="'app.login.tab-login-mobile' | i18n">
      <nz-form-item>
        <nz-form-control [nzErrorTip]="mobileErrorTip">
          <nz-input-group nzSize="large" nzPrefixIcon="user">
            <input nz-input formControlName="mobile" placeholder="手机号" />
          </nz-input-group>
          <ng-template #mobileErrorTip let-i>
            @if (i.errors.required) {
              <ng-container>
                {{ 'validation.phone-number.required' | i18n }}
              </ng-container>
            }
            @if (i.errors.pattern) {
              <ng-container>
                {{ 'validation.phone-number.wrong-format' | i18n }}
              </ng-container>
            }
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzErrorTip]="'validation.verification-code.required' | i18n">
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large" nzPrefixIcon="mail">
                <input nz-input formControlName="phoneCode" placeholder="验证码" />
              </nz-input-group>
            </nz-col>
            <nz-col [nzSpan]="8">
              <img
                nz-image
                [nzSrc]="phoneCaptcha.imageData"
                style="height: 40px; width: 100%"
                (click)="getPhoneCaptcha()"
                [nzDisablePreview]="true"
                nz-popover
                nzPopoverTitle="验证码"
                nzPopoverContent="看不清？点击更换"
              />
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzErrorTip]="'validation.verification-code.required' | i18n">
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large" nzPrefixIcon="mail">
                <input nz-input formControlName="captcha" placeholder="验证码" />
              </nz-input-group>
            </nz-col>
            <nz-col [nzSpan]="8">
              <button type="button" nz-button nzSize="large" (click)="getCaptcha()" [disabled]="count > 0" nzBlock [nzLoading]="loading">
                {{ count ? count + 's' : ('app.register.get-verification-code' | i18n) }}
              </button>
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
    <nz-tab [nzTitle]="'app.login.tab-login-wechat-qrcode' | i18n">
      <nz-form-item>
        <nz-form-control style="text-align: center">
          <nz-row>
            <iframe [src]="wechatQrUrl" frameborder="0" scrolling="noe" width="300px" height="400px"></iframe>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
  </nz-tabs>
  @if (type !== 2) {
    <nz-form-item>
      <nz-col [nzSpan]="12">
        <label nz-checkbox formControlName="remember">{{ 'app.login.remember-me' | i18n }}</label>
      </nz-col>
      <nz-col [nzSpan]="12" class="text-right">
        @if (type === 0) {
          <a class="forgot" routerLink="/passport/forgot">{{ 'app.login.forgot-password' | i18n }}</a>
        }
      </nz-col>
    </nz-form-item>
    <nz-form-item>
      <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
        {{ 'app.login.login' | i18n }}
      </button>
    </nz-form-item>
  }
</form>
<div class="other">
  <a class="register" routerLink="/passport/register">{{ 'app.login.signup' | i18n }}</a>
</div>
